import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
  HeaderStyleInterpolators,
  StackNavigationProp,
} from '@react-navigation/stack';
import BottomTabs from './BottomTabs';
import Detail from '../pages/Detail';
import { Platform, StyleSheet } from 'react-native';

//tpye是表示类型别名的关键字

export type RootStackParamList = {
  BottomTabs: {
    screen?: string;
  };
  Detail: {
    id: number;
  };
};

export type RootStackNavigation = StackNavigationProp<RootStackParamList>;

export const Stack = createStackNavigator<RootStackParamList>();

class Navigator extends React.Component {
  render() {
    return (
      <NavigationContainer>
        <Stack.Navigator
          //"float"所以页面共用一个标题栏
          headerMode="float"
          screenOptions={{
            // 标题是否居中
            headerTitleAlign: 'center',
            //内容和标题的滑动时渐隐的动画效果
            headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
            //从下往上过度的动画效果
            cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            //是否开启手势（'true'表示开启）
            gestureEnabled: true,
            //设置手势的滑动方向 (Android的默认手势滑动方向为垂直方向，'horizontal'表示水平方向)
            gestureDirection: 'horizontal',
            // android 状态栏高度
            // headerStatusBarHeight: StatusBar.currentHeight,
            //设置滑动时过度的阴影样式
            headerStyle: {
              ...Platform.select({
                //设置Android端的样式
                android: {
                  elevation: 0,
                  //去除了Android端滑动时导航栏的阴影效果
                  borderBottomWidth: StyleSheet.hairlineWidth,
                },
              }),
            },
          }}>
          <Stack.Screen
            options={{ headerTitle: '首页' }}
            name="BottomTabs"
            component={BottomTabs}
          />
          <Stack.Screen
            options={{ headerTitle: '详情页' }}
            name="Detail"
            component={Detail}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default Navigator;
